<template>
    <el-breadcrumb separator="/">
        <transition-group name="breadcrumb">
            <el-breadcrumb-item v-for="(item, index) in data" v-if="item.meta.title" :key="index">
                <span v-if="!item.redirect">{{item.meta.title}}</span>
                <router-link v-else :to="item.redirect">{{item.meta.title}}</router-link>
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>

<script>
export default {
    name: "breadcrumb",
    data() {
        return {
            data: null
        }
    },
    created(){
        this.getBreadcrumb();
    },
    watch: {
        $route() { 
            this.getBreadcrumb()
        }
    },
    methods: {
        getBreadcrumb() {
            let matched = this.$route.matched

            this.data = matched
        }
    }
}
</script>

